<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>紧凑圆形在线用户组件</title>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
		<style type="text/less">
			// 基础变量
			@primary: #4F46E5;
			@online: #10B981;
			@bg: #FFFFFF;
			@border: #E5E7EB;
			@shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			@transition: all 0.2s ease;

			// 全局样式
			* {
			  margin: 0;
			  padding: 0;
			  box-sizing: border-box;
			  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
			}

			body {
			  padding-top: 60px;
			}

			// 头部导航
			.header {
			  position: fixed;
			  top: 0;
			  left: 0;
			  right: 0;
			  height: 60px;
			  background: @bg;
			  border-bottom: 1px solid @border;
			  padding: 0 20px;
			  display: flex;
			  align-items: center;
			  z-index: 100;

			  .logo {
			    font-weight: 600;
			    color: @primary;
			    font-size: 18px;
			  }

			  .header-actions {
			    margin-left: auto;
			    display: flex;
			    align-items: center;
			    gap: 12px;
			  }
			}

			// 在线用户组件
			.online-users {
			  position: relative;
			  z-index: 101;

			  // 圆形触发按钮
			  .trigger {
			    width: 38px;
			    height: 38px;
			    border-radius: 50%;
			    background: @bg;
			    border: 1px solid @border;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    cursor: pointer;
			    position: relative;
			    transition: @transition;

			    &:hover {
			      background: #f5f5f7;
			      box-shadow: @shadow;
			    }

			    // 在线人数提示
			    .count {
			      position: absolute;
			      top: -2px;
			      right: -2px;
			      width: 18px;
			      height: 18px;
			      background: @online;
			      color: white;
			      font-size: 11px;
			      border-radius: 50%;
			      display: flex;
			      align-items: center;
			      justify-content: center;
			      border: 2px solid @bg;
			    }

			    i {
			      color: @primary;
			      font-size: 16px;
			    }
			  }

			  // 下拉面板（默认隐藏）
			  .dropdown {
			    position: absolute;
			    top: calc(100% + 8px);
			    right: 0;
			    width: 280px;
			    background: @bg;
			    border-radius: 8px;
			    box-shadow: @shadow;
			    border: 1px solid @border;
			    padding: 12px;
			    transform: scale(0.9);
			    opacity: 0;
			    visibility: hidden;
			    pointer-events: none;
			    transition: @transition;

			    // 鼠标悬停时显示
			    .online-users:hover & {
			      transform: scale(1);
			      opacity: 1;
			      visibility: visible;
			      pointer-events: auto;
			    }

			    // 小三角
			    &::before {
			      content: '';
			      position: absolute;
			      top: -6px;
			      right: 16px;
			      width: 12px;
			      height: 12px;
			      background: @bg;
			      border-top: 1px solid @border;
			      border-left: 1px solid @border;
			      transform: rotate(45deg);
			    }

			    .dropdown-title {
			      font-size: 14px;
			      font-weight: 600;
			      margin-bottom: 8px;
			      padding-bottom: 8px;
			      border-bottom: 1px solid @border;
			      display: flex;
			      align-items: center;
			      gap: 6px;

			      .dot {
			        width: 6px;
			        height: 6px;
			        border-radius: 50%;
			        background: @online;
			      }
			    }

			    // 用户列表
			    .users {
			      max-height: 240px;
			      overflow-y: auto;

			      .user {
			        display: flex;
			        align-items: center;
			        padding: 6px 4px;
			        border-radius: 6px;
			        margin-bottom: 4px;

			        &:hover {
			          background: #f9f9f9;
			        }

			        .avatar {
			          width: 32px;
			          height: 32px;
			          border-radius: 50%;
			          object-fit: cover;
			          margin-right: 10px;
			          position: relative;

			          &::after {
			            content: '';
			            position: absolute;
			            bottom: 0;
			            right: 0;
			            width: 8px;
			            height: 8px;
			            background: @online;
			            border-radius: 50%;
			            border: 1px solid white;
			          }
			        }

			        .info {
			          flex: 1;

			          .name {
			            font-size: 13px;
			            font-weight: 500;
			          }

			          .status {
			            font-size: 11px;
			            color: #666;
			          }
			        }

			        .active {
			          width: 5px;
			          height: 5px;
			          border-radius: 50%;
			          background: @primary;
			          animation: pulse 2s infinite;
			        }
			      }
			    }
			  }
			}

			// 脉冲动画
			@keyframes pulse {
			  0% {
			    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
			  }
			  70% {
			    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0);
			  }
			  100% {
			    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
			  }
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/less@4.1.3/dist/less.min.js"></script>
	</head>
	<body>
		<header class="header">
			<div class="logo">协作平台</div>

			<div class="header-actions">
				<!-- 紧凑圆形在线用户组件 -->
				<div class="online-users">
					<div class="trigger">
						<i class="fas fa-users"></i>
						<span class="count" id="onlineCount">0</span>
					</div>

					<div class="dropdown">
						<div class="dropdown-title">
							<span class="dot"></span>
							在线协作者
						</div>

						<div class="users" id="usersList"></div>
					</div>
				</div>
			</div>
		</header>

		<script>
			// 在线用户数据
			const current_online_user = [
				{ id: 1, name: "张明", status: "编辑中", isActive: true },
				{ id: 2, name: "李华", status: "查看中", isActive: false },
				{ id: 3, name: "王芳", status: "在线", isActive: true },
				{ id: 4, name: "赵伟", status: "评论中", isActive: true },
				{ id: 5, name: "陈静", status: "在线", isActive: false }
			];

			// 渲染组件
			function renderUsers() {
				// 更新在线人数
				document.getElementById("onlineCount").textContent = current_online_user.length;

				// 渲染用户列表
				const usersList = document.getElementById("usersList");
				usersList.innerHTML = "";

				current_online_user.forEach(user => {
					const userEl = document.createElement("div");
					userEl.className = "user";

					userEl.innerHTML = `
          <img src="https://picsum.photos/seed/${user.id}/200/200" 
               alt="${user.name}的头像" 
               class="avatar">
          <div class="info">
            <div class="name">${user.name}</div>
            <div class="status">${user.status}</div>
          </div>
          ${user.isActive ? '<div class="active"></div>' : ""}
        `;

					usersList.appendChild(userEl);
				});
			}

			// 初始渲染
			renderUsers();

			// 模拟状态更新
			setInterval(() => {
				const randomIndex = Math.floor(Math.random() * current_online_user.length);
				current_online_user[randomIndex].isActive =
					!current_online_user[randomIndex].isActive;
				renderUsers();
			}, 3000);
		</script>
	</body>
</html>
